<template>
  <el-breadcrumb class="app-breadcrumb" separator=">">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        v-for="item in levelList"
        :key="item.path"
        :to="{ path: item.path }"
      >
        <span>{{ item.meta.title }}</span>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      levelList: null
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(
        item => item.meta && item.meta.title
      );
      // var dataPrev = localStorage.getItem('router');
      // if()
      // console.log(matched+'11111111');
      // localStorage.setItem("router", JSON.stringify(matched));
      // console.log(localStorage.getItem('router'));
      const first = matched[0];
      if (!this.isIndex(first)) {
        matched = [{ path: "/", meta: { title: "首页" } }].concat(matched);
        this.levelList = matched;
      } else {
        this.levelList = [{ path: "/", meta: { title: "首页" } }];
      }
    },
    isIndex(route) {
      const redirect = route && route.redirect;
      if (!redirect) {
        return false;
      }
      return redirect === "/home";
    }
  }
};
</script>

<style>
.el-breadcrumb__separator {
  margin: 0;
  padding: 0px 4px;
}
.app-breadcrumb.el-breadcrumb {
  padding-top: 4px;
}
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
   transition: all 0.5s;
}
.is-link {
  color: rgb(102, 102, 102) !important;
  font-weight: 500 !important;
}
.el-breadcrumb__item:last-child .is-link {
  color: rgb(139, 79, 69) !important;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
   opacity: 0;
   transform: translateX(20px);
}

.breadcrumb-move {
   transition: all 0.5s;
}

.breadcrumb-leave-active {
   position: absolute;
}

.app-breadcrumb.el-breadcrumb {
   margin-left: 8px;
}
</style>
